import { useComponentStore, useStore } from '@/store'
import {useTitle} from 'ahooks'
import {  Result, Button,Space,Input,Tooltip,Popover, type InputRef,Typography } from 'antd'
import { useNavigate, useParams } from 'react-router-dom'
import styles from './stat.module.scss'
import { CopyOutlined, LeftOutlined, QrcodeOutlined } from '@ant-design/icons'
import {QRCodeSVG} from 'qrcode.react'
import { useEffect, useRef } from 'react'

import EditCanvas from '@/components/editComponents/editCanvas'
import StatList from './statList.tsx'
import StatChart from './statChart.tsx'
import type { questionComponentType } from '@/utils/type.ts'
import useGetStatList from '@/hooks/useGetStatList.ts'

const { Title } = Typography

//统计调查
const Stat = ()=>{
  const {componentList} = useComponentStore()
  const {selectedId='',setSelectedId} = useStore()
  
  const component = componentList.find(item => item.fe_id === selectedId) as questionComponentType
  const {data} = useGetStatList()
  const {id} = useParams()
  const nav = useNavigate()
  const urlInputRef = useRef<InputRef>(null)
  const {isPublished,title} = useStore().pageInfo
  const url = "http://localhost:3000/question/stat/" +id 
  useTitle('统计调查')

  //处理粘贴
  const handleCopy = ()=>{
    const elem = urlInputRef.current
    if(!elem) return 
    elem.select()
    document.execCommand('copy')
    // navigator.clipboard.writeText(elem?.nativeElement?.value )
  }
  //处理编辑
  const handleEdit = ()=>{
    nav('/question/edit/'+id)
  }

  useEffect(()=>{
    setSelectedId('')
  },[setSelectedId])



  if(typeof isPublished === 'boolean'  && !isPublished){
    return (
      // 居住
       <Result
          style={{display:'flex',flexDirection:'column',justifyContent:'center',height:'100vh'}}
          status="warning"
          title="该页面未发布"
          subTitle="Sorry, the page you visited does not exist."
          extra={<Button type="primary" onClick={()=>nav(-1)}>Back lastPage</Button>}
      />
    )
  }

  return (
     <div className={styles['container-wrap']}>
       <div className={styles.header}>
         <div className={styles['header-left']}>
           <Space  size="large">
             <div className={styles.back} onClick={()=>nav(-1)}>
               <LeftOutlined />
              <span>返回</span>
             </div>
             <span className={styles.title}>{title}</span>
           </Space>
         </div>
         <div className={styles['header-center']}>
           <Space>
             <Input ref={urlInputRef} style={{width:'320px'}} value={url}></Input>
             <Tooltip title="复制链接">
                <Button onClick={handleCopy} icon={<CopyOutlined />}></Button>
             </Tooltip>
              <Popover  content={<QRCodeSVG value={url} size={128} />} >
               <Button icon={<QrcodeOutlined />}></Button>
             </Popover>
           </Space>
         </div>
         <div className={styles['header-right']}>
           <Button onClick={handleEdit} type="primary">编辑问卷</Button>
         </div>
       </div>
       <div className={styles.body}>
         <div className={styles['body-left']}>
          <div className={styles.inner}>
            <EditCanvas isDrag={false}></EditCanvas>
          </div>
         </div>
         <div className={styles['body-center']}>
           <StatList list={data?.list} selectedId={selectedId} setSelectedId={setSelectedId} componentList={componentList} component={component}></StatList>
         </div>
         <div className={styles['body-right']}>
            <Title style={{marginLeft:'20px'}} level={3}>统计图表</Title>
            {/* 统计图表 */}
            <StatChart list={data?.list} component={component}></StatChart>
         </div>
       </div>

     </div>
  )
}



export default Stat;


